<script setup lang="ts">
// 首页 - 热门电影和剧集页面
import { ref } from 'vue'
import { useMovieStore } from '../stores/movie'
import { useTVStore } from '../stores/tv'
import { useVarietyStore } from '../stores/variety'

// 使用store
const movieStore = useMovieStore()
const tvStore = useTVStore()
const varietyStore = useVarietyStore()

// 当前激活的标签页：'movie' | 'tv' | 'variety'
const activeTab = ref<'movie' | 'tv' | 'variety'>('movie')

// 切换标签页
const switchTab = (tab: 'movie' | 'tv' | 'variety') => {
  activeTab.value = tab
  if (tab === 'movie' && movieStore.movies.length === 0) {
    movieStore.fetchHotMovies(true)
  } else if (tab === 'tv' && tvStore.tvShows.length === 0) {
    tvStore.fetchHotTVShows(true)
  } else if (tab === 'variety' && varietyStore.varietyShows.length === 0) {
    varietyStore.fetchHotVarietyShows()
  }
}

import { onMounted } from 'vue'

onMounted(() => {
  movieStore.fetchHotMovies(true)
})
</script>

<template>
  <div class="home-container">
    <h1 class="page-title">热门影视</h1>

    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" @tab-change="switchTab" class="content-tabs">
      <el-tab-pane label="热门电影" name="movie">
        <!-- 电影内容区域 -->
      </el-tab-pane>
      <el-tab-pane label="热门剧集" name="tv">
        <!-- 剧集内容区域 -->
      </el-tab-pane>
      <el-tab-pane label="热门综艺" name="variety">
        <!-- 综艺内容区域 -->
      </el-tab-pane>
    </el-tabs>

    <!-- 电影内容 -->
    <div v-if="activeTab === 'movie'" class="content-section" :key="activeTab">
      <!-- 错误提示 -->
      <el-alert v-if="movieStore.error" :title="movieStore.error" type="error" :closable="false" class="error-alert" />

      <!-- 电影网格 -->
      <el-row :gutter="20" class="video-grid">
        <el-col v-for="movie in movieStore.movies" :key="movie.id" :xs="24" :sm="12" :md="8" :lg="6" class="video-item">
          <el-card shadow="hover" class="video-card" @click="$router.push(`/movie/${movie.id}`)">
            <div class="video-cover">
              <el-image :src="'https://images.weserv.nl/?url=' + movie.poster" class="cover-image" fit="cover"
                :alt="movie.title">
                <template #placeholder>
                  <el-skeleton-item variant="image" class="image-skeleton" />
                </template>
                <template #error>
                  <div class="image-error">加载失败</div>
                </template>
              </el-image>
              <div class="video-rate">{{ (movie.rating && (movie.rating * 1).toFixed(1)) || 'N/A' }}</div>
            </div>
            <div class="video-info">
              <h3 class="video-title" :title="movie.title">{{ movie.title }}</h3>
              <p class="video-year">{{ movie.year }}年</p>
              <div class="video-meta">
                <span class="video-genres">{{ (movie.genres && movie.genres.join(' / ')) || '未知' }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 加载状态 -->
        <el-col v-for="n in 8" v-show="movieStore.loading" :key="n" :xs="24" :sm="12" :md="8" :lg="6"
          class="video-item">
          <el-card shadow="hover" class="video-card">
            <el-skeleton animated>
              <template #template>
                <el-skeleton-item variant="image" class="skeleton-cover" />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 80%" />
                  <div>
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-card>
        </el-col>

        <!-- 空状态 -->
        <el-col v-if="movieStore.isEmpty && !movieStore.loading" :span="24">
          <el-empty description="暂无电影数据" />
        </el-col>
      </el-row>

      <!-- 加载更多按钮 -->
      <div class="load-more" v-if="movieStore.hasMore && !movieStore.loading">
        <el-button type="primary" @click="movieStore.loadMore" :loading="movieStore.loading">
          加载更多
        </el-button>
      </div>
    </div>

    <!-- 剧集内容 -->
    <div v-if="activeTab === 'tv'" class="content-section" :key="activeTab">
      <!-- 错误提示 -->
      <el-alert v-if="tvStore.error" :title="tvStore.error" type="error" :closable="false" class="error-alert" />

      <!-- 剧集网格 -->
      <el-row :gutter="20" class="video-grid">
        <el-col v-for="tv in tvStore.tvShows" :key="tv.id" :xs="24" :sm="12" :md="8" :lg="6" class="video-item">
          <el-card shadow="hover" class="video-card" @click="$router.push(`/tv/${tv.id}`)">
            <div class="video-cover">
              <el-image :src="'https://images.weserv.nl/?url=' + tv.poster" class="cover-image" fit="cover"
                :alt="tv.title">
                <template #placeholder>
                  <el-skeleton-item variant="image" class="image-skeleton" />
                </template>
                <template #error>
                  <div class="image-error">加载失败</div>
                </template>
              </el-image>
              <div class="video-rate">{{ (tv.rating && (tv.rating * 1).toFixed(1)) || 'N/A' }}</div>
            </div>
            <div class="video-info">
              <h3 class="video-title" :title="tv.title">{{ tv.title }}</h3>
              <p class="video-year">{{ tv.year }}年</p>
              <div class="video-meta">
                <span class="video-genres">{{ (tv.genres && tv.genres.join(' / ')) || '未知' }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 加载状态 -->
        <el-col v-for="n in 8" v-show="tvStore.loading" :key="n" :xs="24" :sm="12" :md="8" :lg="6" class="video-item">
          <el-card shadow="hover" class="video-card">
            <el-skeleton animated>
              <template #template>
                <el-skeleton-item variant="image" class="skeleton-cover" />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 80%" />
                  <div>
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-card>
        </el-col>

        <!-- 空状态 -->
        <el-col v-if="tvStore.isEmpty && !tvStore.loading" :span="24">
          <el-empty description="暂无剧集数据" />
        </el-col>
      </el-row>

      <!-- 加载更多按钮 -->
      <div class="load-more" v-if="tvStore.hasMore && !tvStore.loading">
        <el-button type="primary" @click="tvStore.loadMore" :loading="tvStore.loading">
          加载更多
        </el-button>
      </div>
    </div>
    <!-- 综艺内容 -->
    <div v-if="activeTab === 'variety'" class="content-section" :key="activeTab">
      <!-- 错误提示 -->
      <el-alert v-if="varietyStore.error" :title="varietyStore.error" type="error" :closable="false"
        class="error-alert" />

      <!-- 综艺网格 -->
      <el-row :gutter="20" class="video-grid">
        <el-col v-for="variety in varietyStore.varietyShows" :key="variety.id" :xs="24" :sm="12" :md="8" :lg="6"
          class="video-item">
          <el-card shadow="hover" class="video-card" @click="$router.push(`/variety/${variety.id}`)">
            <div class="video-cover">
              <el-image :src="'https://images.weserv.nl/?url=' + variety.poster" class="cover-image" fit="cover"
                :alt="variety.title">
                <template #placeholder>
                  <el-skeleton-item variant="image" class="image-skeleton" />
                </template>
                <template #error>
                  <div class="image-error">加载失败</div>
                </template>
              </el-image>
              <div class="video-rate">{{ (variety.rating && (variety.rating * 1).toFixed(1)) || 'N/A' }}</div>
            </div>
            <div class="video-info">
              <h3 class="video-title" :title="variety.title">{{ variety.title }}</h3>
              <p class="video-year">{{ variety.year }}年</p>
              <div class="video-meta">
                <span class="video-genres">{{ (variety.genres && variety.genres.join(' / ')) || '未知' }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 加载状态 -->
        <el-col v-for="n in 8" v-show="varietyStore.loading" :key="n" :xs="24" :sm="12" :md="8" :lg="6"
          class="video-item">
          <el-card shadow="hover" class="video-card">
            <el-skeleton animated>
              <template #template>
                <el-skeleton-item variant="image" class="skeleton-cover" />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 80%" />
                  <div>
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-card>
        </el-col>

        <!-- 空状态 -->
        <el-col v-if="varietyStore.isEmpty && !varietyStore.loading" :span="24">
          <el-empty description="暂无综艺数据" />
        </el-col>
      </el-row>

      <!-- 加载更多按钮 -->
      <div class="load-more" v-if="varietyStore.hasMore && !varietyStore.loading">
        <el-button type="primary" @click="varietyStore.loadMore" :loading="varietyStore.loading">
          加载更多
        </el-button>
      </div>
    </div>
  </div>
</template>
<style>
.home-container .el-tabs__item {
  color: #fff;
}
</style>
<style scoped>
.home-container {
  width: 100%;
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
}



.page-title {
  margin-bottom: 20px;
}

.error-alert {
  margin-bottom: 20px;
}

.video-grid {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.video-item {
  margin-bottom: 20px;
}

.video-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.video-rate {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 193, 7, 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.video-info {
  padding: 10px 0;
}

.video-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-year {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: #909399;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.video-genres {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skeleton-cover {
  width: 100%;
  height: 200px;
  border-radius: 4px;
}

.image-skeleton {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 12px;
}

.load-more {
  text-align: center;
  margin-top: 30px;
}

.content-tabs {
  margin-bottom: 20px;
}

.content-tabs :deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #e4e7ed;
}

.content-tabs :deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
}

.content-tabs :deep(.el-tabs__item.is-active) {
  color: #409eff;
}

.content-tabs :deep(.el-tabs__active-bar) {
  background-color: #409eff;
}
</style>
